<template>
  <div id="app">
    <input v-model="newItem" v-on:keyup.enter="addNew">
    <ul>
        <li v-for="item in items" v-bind:class="{finish:item.isFinished}" v-on:click="doSomething(item)">
            {{item.label}}
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    name:"app",
    data:function(){
        return {
            title:"this is a todo list",
            items:Store.fetch(),
            newItem:"",
            childWords:''
        }
    },
    methods:{
        doSomething:function(data){
            data.isFinished=!data.isFinished;
        },
        addNew:function(){
            this.items.push({
                label:this.newItem,
                isFinished:false
            });
            this.newItem='';
        },
        ctfa:function(){
            
        }
    },
    watch:{
        items:{
            handler:function(items){
                Store.save(items);
            },
            deep:true
        }
    }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.finish{
    background:red;
}
</style>
